<template>
	<div class="home">
		<el-row id="artList" type="flex" justify="space-around">
			<el-col :span="16">
				<el-row class="art-item" v-for="item in articles" key="item.id">
					<el-card shadow="hover">
						<h5><router-link to="/article" tag="span" class="art-title">{{item.title}}</router-link></h5>
						<el-row class="art-info d-flex align-items-center justify-content-start">
							<div class="art-time"><i class="el-icon-time"></i>{{item.createtime | formatdate}}</div>
							<div class="d-flex align-items-center"><img class="tag" src="../assets/tag.png" />：
							<div v-for="articletag in aritclestags" key="articletag.id">
								<el-tag size="mini" v-for="tag in tags" key="tags.id" v-if="item.id==articletag.articleId && tag.id==articletag.tagId">{{tag.yesapiOneTagsName}}</el-tag>
							</div>
							</div>
						</el-row>
						<el-row class="art-body">
							<div class="side-img hidden-sm-and-down"><img class="art-banner" src="../assets/vue.jpg"></div>
							<div class="side-abstract">
								<div class="art-abstract" v-html="item.content">
										
								</div>
								<div class="art-more"  @click="setArticleId(item.id)">
									<router-link to="/article" tag="span" >
										<el-button plain  >{{$t('home.readMore')}}</el-button>
									</router-link>
									<div class="view"><i class="el-icon-view"></i>12414</div>
								</div>
							</div>
						</el-row>
					</el-card>
					<img class="star" src="../assets/star.png" />
				</el-row>

				<div class="block pagination">
					<el-pagination background="#f9f9f9" layout="prev, pager, next"
					@current-change="pageCurrentChange"
					current-page="pageform.pageNum"
					  :total="totalNum">
					</el-pagination>
				</div>
			</el-col>
			<el-col :span="6" class="hidden-sm-and-down" id="side">
				<div class="item">
					<tag></tag>
				</div>
				<div class="item">
					<friend></friend>
				</div>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	import friend from '../components/friend'
	import tag from '../components/tag'
	import {formatdate} from '../utils/formatdate'
	export default {
		name: 'home',
		filters: {
        formatdate(time) {
            var date = new Date(time);
            return formatdate(date, 'yyyy-MM-dd hh:mm:ss');  // 此处可根据自己的需要自定义想要的日期格式
        }
    },
		data(){
			return{
				articles:"",
				tags:"",
				aritclestags:"",
				totalNum:50,
				pageform: {
					total: 200, // 总条目数
					pages: 5,  // 总页数
					pageNum: 1, // 当前的页码
					pageSizes: [5,10,15,20,30,40,50], // select选项设置：条/页
					pageSize: 5, // 每页显示条目个数
					navigateFirstPage: 1, // 上一页
					navigateLastPage: 3, // 下一页
					lastPage: false, // 是最后一页？
					firstPage: false, // 是第一页？
					hasNextPage: true, // 有下一页？
					hasPreviousPage: true // 有上一页？
				},
			}
		},
		methods:{
				pageCurrentChange(val,) {
				// console.log('当前页:'+ val);
				this.pageform.pageNum = val;
				console.log("当前页数:"+this.pageform.pageNum);
				this.$ajax.get("http://localhost:8080/system/yesapiOneArticles/get/getLimitArticle/"+this.pageform.pageNum).then((res)=>{
						this.articles=res.data;
				});

				//回到顶部插件
				cancelAnimationFrame(this.timer)
      const self = this
      self.timer = requestAnimationFrame(function fn () {
        const oTop = document.body.scrollTop || document.documentElement.scrollTop
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 50
          self.timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(self.timer)
        }
      })
			},
			setArticleId(id){
					this.$store.state.articleid=id;
					console.log("home:"+id);
					this.$ajax.get("http://localhost:8080/system/yesapiOneArticles/get/getArticleByid",{headers:{articleid:this.$store.state.articleid}}).then((res)=>{
						this.$store.state.article=res.data;
						console.log(this.$store.state.article)
				});
			}
		},
		components: {
			friend,
			tag
		},
		mounted(){
				this.$ajax.get("http://localhost:8080/system/yesapiOneArticles/get/getLimitArticle/1").then((res)=>{
						this.articles=res.data;
				});
				this.$ajax.get("http://localhost:8080/system/yesapiOneTags/selectAllTags").then((res)=>{
					this.tags=res.data;
				});
				this.$ajax.get("http://localhost:8080/system/yesapiOneArticleTag/get/ArtilcleTag").then((res)=>{
						this.aritclestags=res.data;
				});
			
		}
	}
</script>

<style scoped>
	#side .item {
		margin-bottom: 30px;
	}
	
	.art-item {
		margin-bottom: 30px;
		position: relative;
	}
	
	.art-item .star {
		width: 60px;
		height: 60px;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	img.tag {
		width: 16px;
		height: 16px;
	}
	
	.art-title {
		border-left: 3px solid #F56C6C;
		padding-left: 5px;
		cursor: pointer;
	}
	
	.art-title:hover {
		padding-left: 10px;
		color: #409EFF;
	}
	
	.art-time {
		margin-right: 20px;
	}
	
	.art-body {
		display: flex;
		padding: 10px 0;
	}
	
	.side-img {
		height: 150px;
		width: 270px;
		overflow: hidden;
		margin-right: 10px;
	}
	
	img.art-banner {
		width: 100%;
		height: 100%;
		transition: all 0.6s;
	}
	
	img.art-banner:hover {
		transform: scale(1.4);
	}
	
	.side-abstract {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.art-abstract {
		flex: 1;
		color: #aaa;
	}
	
	.art-more {
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.art-more .view {
		color: #aaa;
	}
	h5{
		font-size: 18px;
	}
	.pagination {
		background-color: #F9F9F9;
	}
</style>